<template>
	<view>
		<!-- 导航条 -->
		<view class="cu-custom" :style="{ height: 80 + 'rpx' }">
			<view class="cu-bar fixed bg-bgcolor" :style="{
					height: 80 + 'rpx',
					backgroundColor: common.appStyle.cart_nav_color ? common.appStyle.cart_nav_color : '#f7f7f7',
					backgroundImage: 'url(' + $wanlshop.oss( common.appStyle.cart_nav_image, 0, 50, 1, 'transparent', 'png' ) + ')',
					color: common.appStyle.cart_font_color == 'light' ? '#ffffff' : '#333333'
				}">
				<view class="action u-flex u-flex-y-center">
					<view class="title">
						{{ cartLang[language].title }}
					</view>
					<view class="action gl" @tap="operate()">
						<text v-if="cart.operate">{{ cartLang[language].done }}<</text>
						<text v-else>{{ cartLang[language].manage }}</text>
					</view>
				</view>
			</view>
		</view>
		<block v-if="cart.list.length > 0">
			<view class="wanl-cart-shop radius-bock margin-bj padding-bj" v-for="(item, index) in cart.list"
				:key="index">
				<view class="shop margin-bottom" @tap="onShop(item.shop_id)">
					<!-- 店铺选择 -->
					<view class="checkbox" @tap.stop="shopchoose(item)">
						<image v-if="item.check" src="https://fen.fuliaoxx.com/img/new/car/check.png" class="checked" mode=""></image>
						<view v-else class="check">

						</view>
					</view>
					<view class="shopname">
						<image src="https://fen.fuliaoxx.com/img/new/car/mark.png" style="width: 25.5rpx;height: 23rpx;margin-right: 11rpx;" mode=""></image>
						<text class="shop_name">{{ item.shop_name }}</text>
					</view>
					<view class="info"><text class="wlIcon-fanhui2 margin-left-xs" style="font-size: 18rpx;"></text></view>
				</view>
				<view class="wanl-cart-goods" v-for="(goods, keys) in item.products" :key="keys">
					<!-- 商品选择 -->
					<view class="checkbox margin-right-sm" @tap="choose({ index: index, keys: keys })">
						<image v-if="goods.checked" src="https://fen.fuliaoxx.com/img/new/car/check.png" class="checked" mode=""></image>
						<view v-else class="check">

						</view>
					</view>
					<!-- <view class="text-xxl margin-right-sm" @tap="choose({ index: index, keys: keys })">
						<text v-if="goods.checked" class="wlIcon-xuanze-danxuan wanl-orange"></text>
						<text v-else class="wlIcon-xuanze wanl-gray-light"></text>
					</view> -->
					<view class="picture" @tap="onGoods(goods.goods_id)">
						<image :src="$wanlshop.oss(goods.image, 100, 100, 1)" mode="aspectFill"></image>
					</view>
					<view class="content">
						<view class="text-cut-2 wanl-gray-dark goodstitle" @tap="onGoods(goods.goods_id)">
							{{ goods.title }}
						</view>
						<view class="cu-tag wanl-gray opt">
							{{ cartLang[language].spec }}:{{ goods.sku.difference.join(' ') }}
						</view>
						<view class="flex justify-between align-center">
							<view class="text-price wanl-orange text-lg">
								{{ goods.sku.price }}
							</view>
							<view class="wanl-numberBox solid">
								<view @tap="bcsub(goods)">
									<text class="wlIcon-jian" style="color: #acacac;"></text>
								</view>
								<view style="flex: 1;text-align: center;border-right: 1rpx solid #DFDFDF;border-left: 1rpx solid #DFDFDF;font-size: 28.7rpx;color: #333333;">{{ goods.number }}</view>
								<view @tap="bcadd(goods)">
									<text class="wlIcon-tianjia" style="color: #6b6b6b;"></text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</block>
		<block class="margin-bj padding-bj" v-else>
			<wanl-empty src="cart_default3x" :text="$getText('哎呀，购物车空空如也')" />
			
			<wanl-product :dataList="likeData" />
		</block>
		<uni-load-more :status="status" :content-text="contentText" />
		<!-- #ifdef APP-PLUS -->
		<view style="height: 100rpx;"></view>
		<!-- #endif -->
		<view class="safeAreaBottom"></view>
		<!-- 操作栏 -->
		<view class="wanl-cart-foot fixedView solid-top edit" v-if="cart.operate">
			<view class="flex align-center" @tap="toCartchoose()">
				<!-- <view class="text-xxl">
					<text v-if="cart.status" class="wlIcon-xuanze-danxuan wanl-orange"></text>
					<text v-else class="wlIcon-xuanze wanl-gray-light"></text>
				</view> -->
				<view class="checkbox">
					<image v-if="cart.status" src="https://fen.fuliaoxx.com/img/new/car/check.png" class="checked" mode=""></image>
					<view v-else class="check">
				
					</view>
				</view>
				<view class="" style="margin-left: 10rpx;font-size: 25rpx;color: #979797;">
					<text>{{ cart.status ? $getText('取消') :  $getText('全选')}}</text>
				</view>
				<!-- <view v-if="language==1" class="" style="margin-left: 10rpx;font-size: 25rpx;color: #979797;">
					<text>{{ cart.status ? 'Бас тарту' : 'بارلعىن تاڭداۋ' }}</text>
				</view> -->
			</view>
			<view class="flex">
				<button v-if="cart.allnum == 0" class="cu-btn round line-gray">{{ cartLang[language].moveFav }}</button>
				<button v-else class="cu-btn round line-orange" @tap="move()">{{ cartLang[language].moveFav }}</button>
				<button class="cu-btn round line-orange" @tap="toEmpty()">{{ cartLang[language].quickClear }}</button>
				<button v-if="cart.allnum == 0" class="cu-btn round line-gray">{{ cartLang[language].del }}</button>
				<button v-else class="cu-btn round bg-gradual-orange" @tap="del()">{{ cartLang[language].del }}</button>
			</view>
		</view>
		<view class="wanl-cart-foot fixedView solid-top account" v-else>
			<view class="flex align-center" @tap="toCartchoose()">
				<view class="checkbox">
					<image v-if="cart.status" src="https://fen.fuliaoxx.com/img/new/car/check.png" class="checked" mode=""></image>
					<view v-else class="check">
				
					</view>
				</view>
				<view class=""  style="margin-left: 10rpx;font-size: 25rpx;color: #979797;">
					<text>{{ cart.status ? $getText('取消') :  $getText('全选')}}</text>
				</view>
				<!-- <view class="" v-if="language==1" style="margin-left: 10rpx;font-size: 25rpx;color: #979797;">
					<text>{{ cart.status ? 'Бас тарту' : 'Барлығын таңдау' }}</text>
				</view> -->
			</view>
			<view class="flex">
				<view class="text-sm text-left">
					<view style="font-size: 24rpx;">
						{{ cartLang[language].total }}：
						<text class="text-price" style="font-size: 30rpx;">{{ cart.allsum }}</text>
					</view>
					<view>{{ cartLang[language].noFreight }}：</view>
				</view>
				<button v-if="cart.allnum == 0" class="cu-btn round line-gray">{{ cartLang[language].settlement }}</button>
				<button v-else class="cu-btn round" style="background-color: #FFC400;color: #fff;font-size: 30rpx;" @tap="settlement()">
					{{ cartLang[language].settlement }}
				</button>
			</view>
		</view>
		<home />
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex';
	import home from '@/components/home/index'
	export default {
		components: {
			home
		},
		data() {
			return {
				reload: true,
				showDropdown: false,  // 控制下拉框的显示与隐藏
				likeData: [],
				current_page: 1, //当前页码
				last_page: 1, //总页码
				status: 'loading',
				contentText: {
					contentdown: '',
					contentrefresh: '正在加载...',
					contentnomore: ''
				},
				cartLang: {
				  0: { // 中文
				    title: '购物车',
				    manage: '管理',
				    done: '完成',
				    shopName: '店铺',
				    spec: '规格',
				    price: '价格',
				    emptyText: '哎呀，购物车空空如也！',
				    all: '全选',
				    cancelAll: '取消',
				    moveFav: '移动关注',
				    quickClear: '快速清理',
				    del: '删除',
				    total: '合计',
				    noFreight: '不含运费',
				    settlement: '立即结算',
				    confirmClear: '确定清空购物车？',
				    noGoods: '购物车没有任何宝贝，马上去选一个心仪的宝贝吧~'
				  },
				  1: { // 哈萨克语
				    title: "سەبەت",
				    manage: ' باسقارۋ',
				    done: 'اياقتاۋ',
				    shopName: 'دۇكەن اتاۋى',
				    spec: 'Сипаттама',
				    price: 'Бағасы',
				    emptyText: ' كوتەك  تاۋارجوق',
				    all: 'بارلعىن تاڭداۋ',
				    cancelAll: 'Бас тарту',
				    moveFav: 'قوزعالمالى تىركەلۋ',
				    quickClear: 'جىلدام تازالاۋ',
				    del: ' جويۋ',
				    total: ' جالپى',
				    noFreight: 'جەتكىزۋ اقسى قامتىلماعاندا',
				    settlement: 'ەسەپ جاساۋ',
				    confirmClear: 'سىەبەتتى تازالاۋدى راستاۋ',
				    noGoods: 'كوتەك  تاۋارجوق'
				  }
				}
			};
		},
		onReachBottom() {
			//判断是否最后一页
			if (this.current_page >= this.last_page) {
				this.status = 'noMore';
			} else {
				this.reload = false;
				this.current_page = this.current_page + 1; //页码+1
				this.status = 'loading';
				this.loadlikeData();
			}
		},
		computed: {
			...mapState(['cart', 'common','language']),
			...mapState('translate', ['language']),
			currentLanguage() {
				return this.language === 0 ? '中文' : 'Қазақша';
			},
			txt() {
			    return this.cartLang[this.language ?? 0]; // ✅ 修复报错
			  }
		},
		onShow() {
			setTimeout(() => {
				uni.setNavigationBarColor({
					frontColor: this.$store.state.common.appStyle.cart_font_color == 'light' ?
						'#ffffff' : '#000000',
					backgroundColor: this.$store.state.common.appStyle.cart_nav_color
				});
			}, 200);
		},
		onLoad() {
			// 加载猜你喜欢
			this.loadlikeData();
		},
		methods: {
			...mapActions({
				switchLanguage: 'translate/switchLanguage',  // 映射 Vuex 中的 action
			}),
			toggleDropdown() {
				this.showDropdown = !this.showDropdown;  // 切换下拉菜单显示
			},
			changeLanguage(index) {
			console.log('点击语言：', index);
			this.switchLanguage(index);
			console.log('切换后 language：', this.$store.state.translate.language); // ✅ 打印 Vuex 状态
			this.showDropdown = false;
			},
			
			...mapActions({
				operate: 'cart/operate', // 管理购物车
				choose: 'cart/choose', // 选择商品
				shopchoose: 'cart/shopchoose', // 选择店铺
				bcadd: 'cart/bcadd', // 添加数量
				bcsub: 'cart/bcsub', // 减少数量
				move: 'cart/move', // 移动购物车
				settlement: 'cart/settlement', // 结算购物车
				del: 'cart/del' // 删除选中购物车
			}),
			async loadlikeData() {
				await uni.request({
					url: '/wanlshop/product/likes?pages=cart',
					data: {
						page: this.current_page
					},
					success: res => {
						this.likeData = this.reload ? res.data.data : this.likeData.concat(res.data
							.data); //评论数据 追加
						this.current_page = res.data.current_page; //当前页码
						this.last_page = res.data.last_page; //总页码
						this.status = 'more';
					}
				});
			},
			// 禁止空购物车点击全选
			toCartchoose() {
				if (this.$store.state.cart.list.length == 0) {
					uni.showModal({
						content: '购物车没有任何宝贝，马上去选一个心仪的宝贝吧~',
						success: res => {
							if (res.confirm) {
								this.$wanlshop.on('/pages/category');
							}
						}
					});
				} else {
					this.$store.dispatch('cart/cartchoose');
				}
			},
			toEmpty() {
				uni.showModal({
					content: '确定清空购物车？',
					success: res => {
						if (res.confirm) {
							this.$store.dispatch('cart/empty');
						}
					}
				});
			}
		}
	};
</script>

<style lang="scss">
	page {
		background-color: #F9F9F9;
	}

	.wanl-gray-light {
		color: #eee;
	}

	.wanl-cart-shop {
		background-color: #ffffff;
	}

	/* #ifndef MP-ALIPAY */
	.wanl-cart-shop radio::before,
	.wanl-cart-shop checkbox::before {
		margin-top: -7px;
		right: 1px;
	}

	.wanl-cart-shop radio .wx-radio-input,
	.wanl-cart-shop checkbox .wx-checkbox-input,
	.wanl-cart-shop radio .uni-radio-input,
	.wanl-cart-shop checkbox .uni-checkbox-input {
		margin: 0;
		width: 16px;
		height: 16px;
	}

	/* #endif */
	.wanl-cart-shop checkbox-group {
		margin-right: 25rpx;
	}

	.wanl-cart-shop .shop {
		position: relative;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.wanl-cart-shop .shop .shopname {
		position: absolute;
		display: flex;
		align-items: center;
		left: 60rpx;
	}

	.wanl-cart-shop .shop uni-checkbox .uni-checkbox-input {
		border: 1px solid #cccccc;
	}

	/* 商品 */
	.wanl-cart-goods {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.wanl-cart-goods:last-child {
		margin-bottom: 18rpx;
	}

	.wanl-cart-goods .picture {
		width: 180rpx;
		height: 180rpx;
	}

	.wanl-cart-goods .picture image {
		width: 180rpx;
		height: 180rpx;
		overflow: hidden;
		border-radius: 15rpx;
	}

	/* 1.0.6升级 */
	.wanl-cart-goods .content {
		padding-left: 25rpx;
		width: 100%;
		overflow: hidden;
	}

	.wanl-cart-goods .content .opt {
		font-size: 20rpx;
		padding: 0 11rpx;
		color:#999999;
		height: 36rpx;
		background-color: #f7f6f6;
		font-weight: 300;
		margin-top: 10rpx;
		margin-bottom: 25rpx;
		border-radius: 5rpx;
		line-height: 36rpx;
	}

	.wanl-cart-goods .content .opt text {
		padding-right: 6rpx;
		padding-left: 10rpx;
	}

	/* 操作条 */
	.wanl-cart-foot {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		z-index: 997;
		min-height: 52px;
		background-color: #ffffff;
		padding: 0 25rpx;
	}

	.wanl-cart-foot.solid:after {}

	/* #ifndef MP-ALIPAY */
	.wanl-cart-foot radio:before,
	.wanl-cart-foot checkbox:before {
		margin-top: -7px;
		right: 1px;
	}

	.wanl-cart-foot radio .wx-radio-input,
	.wanl-cart-foot checkbox .wx-checkbox-input,
	.wanl-cart-foot radio .uni-radio-input,
	.wanl-cart-foot checkbox .uni-checkbox-input {
		margin: 0;
		width: 16px;
		height: 16px;
	}

	/* #endif */
	.wanl-cart-foot.account button {
		margin-left: 25rpx;
	}

	.wanl-cart-foot.edit button {
		margin-left: 20rpx;
	}

	.wanl-cart-foot.account .cu-btn {
		padding: 0 39rpx;
		height: 72rpx;
		margin-top: 6rpx;
		/* border-radius: 20rpx; */
		line-height: 72rpx;
	}

	.wanl-cart-foot.edit .cu-btn {
		padding: 0 30rpx;
		font-size: 24rpx;
		height: 56rpx;
	}

	.title {
		font-family: HelloFont, HelloFont;
		font-weight: bold;
		font-size: 36rpx;
		color: #000000;
		line-height: 60rpx;
		position: relative;
		margin-right: 35rpx;

		&::after {
			content: '';
			width: 32rpx;
			height: 6rpx;
			background: #000000;
			border-radius: 2rpx 2rpx 2rpx 2rpx;
			position: absolute;
			bottom: 0;
			left: calc(50% - 16rpx);
		}
	}

	.gl {
		font-family: PingFang-SC, PingFang-SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #999999;
		line-height: 28rpx;
	}

	.checked {
		width: 32rpx;
		height: 32rpx;
	}

	.check {
		width: 32rpx;
		height: 32rpx;
		background: #fff;
		border: 3rpx solid #CBCBCB;
		border-radius: 50%;
	}

	.checkbox {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.margin-right-sm{
		margin-right: 23rpx;
	}
	.shop_name{
		font-family: PingFang-SC, PingFang-SC;
		font-weight: 500;
		font-size: 27rpx;
		color: #999999;
		line-height: 50rpx;
	}
	.goodstitle{
		font-family: PingFang-SC, PingFang-SC;
		font-weight: bold;
		font-size: 26rpx;
		color: #333333;
	}
	.text-price{
		font-family: PingFang-SC, PingFang-SC;
		font-weight: bold;
		font-size: 34rpx;
		color: #FFC400;
	}
	.cu-btn{
		
	}
	.bg-gradual-orange{
		background: #FFC400;
	}
</style>